<template>
    <div class="footer-container">
            
        <el-row type="flex" :gutter="20" justify="center">
            
            <el-col :span="5">
                <router-link to="/home">
                    <div class="grid-content bg-purple"> <i class="el-icon-s-home"></i> </div>
                    <div class="title">首页</div>
                </router-link>
            </el-col>
            
            <el-col :span="5">
                <router-link to="/task">
                    <div class="grid-content bg-purple"> <i class="el-icon-s-management"></i> </div>
                    <div class="title">任务</div>
                </router-link>
            </el-col>
            
            <el-col :span="5">
                <router-link to="/promo">
                    <div class="grid-content bg-purple"> <i class="el-icon-s-promotion"></i> </div>
                    <div class="title">推广</div>
                </router-link>
            </el-col>
            
            <el-col :span="5">
                <router-link to="/mine">
                    <div class="grid-content bg-purple"> <i class="el-icon-s-custom"></i> </div>
                    <div class="title">我的</div>
                </router-link>
            </el-col>

        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        
    },
}
</script>


<style>
    /******************************************
     * footer
     ******************************************/
	.footer-container {
		position: fixed;
		width: 100%;
		bottom: 0;
        background-color: #fff;
		border-top: 1px solid #eef;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .footer-container a,
    .footer-container a:visited {
        text-decoration: none;
    }
    .footer-container a.router-link-active .bg-purple i,
    .footer-container a.router-link-active .title{
        color: #409eff;
    }
	.el-col.el-col-5 {
		width: 25%;
		height: 54px;
		cursor: pointer;
	}
	.el-col.el-col-5:hover {
		border-radius: 0;
	}
	.el-col.el-col-5 .bg-purple i,
	.el-col.el-col-5 .title {
		color: #808080;
	}
	.el-col.el-col-5 .bg-purple {
		text-align: center;
		margin-top: 5px;
	}
	.el-col.el-col-5 .bg-purple i {
		width: 25px;
		height: 25px;
		font-size: 20px;
	}
	.el-col.el-col-5 .title {
		font-size: 12px;
		text-align: center;
	}
</style>